<template>
  <div class="main">
    <div class="header">
      <div class="header-top">
        <div class="navbar">
          <div class="logo">
            <a class="navbar-logo" href="#">
              <img alt="logo" src="../../static/icon/logos.png"> 小微助手
            </a>
          </div>
          <ul>
            <li>
              <router-link to="/Home" style="color: #329897;">首页</router-link>
            </li>
            <li>
              <router-link to="/ProductFunction">产品功能</router-link>
            </li>
            <li>
              <router-link to="/ContactUs">联系我们</router-link>
            </li>
            <li>
              <router-link to="/BuyNow" style="color:#FFFF00">我也想要</router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="header-banner">
        <div class="banner">
          <div class="banner-left">
            <img src="../../static/images/hand.png" alt="">
          </div>
          <div class="banner-right">
            <h1>小微助手</h1>
            <h3>微信社群管理，用小微助手就够啦！专业的微信社群管理专家，提高社群管理效率、提升社群价值</h3>
            <table class="right-radius" cellspacing="10">
              <tr>
                <td>促活</td>
                <td>吸粉</td>
                <td>数据</td>
                <td>多群<br>管理</td>
              </tr>
            </table>
            <button>立即购买</button>
          </div>
        </div>
      </div>
    </div>

    <div class="home-content">
      <h3>为什么选择小微助手--<span>小微助手</span></h3>
      <div class="home-content-ds">
        小微助手是专业的微信社群管理专家。拥有自动拉人进群、数据分析、入群欢迎语、群公告、智能聊天、增值服务、群动态、群签到、群内信息保存、多群
        <br>
        管理等多项功能，真正实现促活、吸粉、数据、多群管理，提升社群管理效率。
      </div>
      <div class="title-line"></div>
      <div class="home-content-fc">
        <img src="../../static/images/home-fc.jpg" alt="">
      </div>
    </div>

    <div class="home-contentTwo">
      <h3>微友圈交流专家--<span>小微助手</span>
      </h3>
      <div class="home-contentTwo-ds">
        微友圈为社群成员提供了一个交流的平台，微成员可通过微友圈发布文字图片信息，和群组内成员沟通交流
        <br>，群组管理人员则可以发布公告和群规，更加方便快捷的将信息推送给他人。
      </div>
      <div class="title-line"></div>
      <div class="home-contentTwo-center">
        <div class="home-contentTwo-left">
          <div>
            <img src="../../static/images/weixin.jpg" alt="">
          </div>
          <p>
            免费咨询电话：0516-83968556
            <br>
            <span>长按识别二维码~关注即可购买</span>
          </p>
        </div>
        <div class="home-contentTwo-right">
          <img src="../../static/images/home-phone.png" alt="">
        </div>
      </div>
    </div>

    <div class="home-contentThree">
      <div class="home-contentThree-center">
        <div class="home-contentThree-left">
          <img src="../../static/images/home-phone2.png" alt="">
        </div>
        <div class="home-contentThree-right">
          <h3>群数据分析专家--<span>小微助手</span>
          </h3>
          <p>群数据包括红包统计、本群排行榜、群日志，群内排行榜、热词榜、群成员活跃度、空间访问量统计等等</p>
          <div>
            <img src="../../static/images/weixin.jpg" alt="">
          </div>
          <p style="font-size:12px">长按识别二维码-关注即可购买</p>
        </div>
      </div>
    </div>
    <div class="home-contentFour">
      <h3>多重增值服务--<span>小微助手</span>
      </h3>
      <div class="home-contentFour-ds">
        天气查询、小笑话、黄历、星座运势、菜谱、热点资讯、快递查询等多种增值服务
      </div>
      <div class="title-line"></div>
      <div class="home-contentFour-fc">
        <img src="../../static/images/home-zengzhi.png" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {}
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .navbar li:first-child {
    background: linear-gradient(0deg, #cfcfd0, #f2f5f8);
    border-radius: 30px;
  }

  .header {
    background: url(../../static/images/home.jpg) no-repeat;
    width: 100%;
    margin: 0 auto;
  }

  .header-top {
    width: 100%;
  }

  .header-banner {
    width: 100%;
  }

  .header .banner {
    width: 1000px;
    height: 499px;
    margin: 0 auto;
    display: block;
  }
  .banner .banner-left {
    width: 356px;
    float: left;
  }

  .banner .banner-right {
    width: 535px;
    height: 100%;
    float: left;
    margin-left: 100px;
  }

  .banner-left img {
    height: 499px;
  }

  .banner-right h3 {
    font-size: 24px;
    color: #E5E6E6;
    font-weight: normal;
    margin-top: 20px;
    margin-bottom: 10px;
    letter-spacing: 5px;
  }

  .banner-right h1 {
    margin-top: 70px;
    font-size: 50px;
    line-height: 55px;
    color: white;
    font-weight: normal;
    margin-bottom: 30px;
    letter-spacing: 5px;
  }

  .right-radius {
    margin-left: -15px;
  }

  .right-radius td {
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50px;
    background: black;
    opacity: 0.5;
    color: #E5E6E6;
  }

  .banner-right button {
    margin: 20px 0;
    letter-spacing: 5px;
    background: #DAAD22;
    color: white;
    display: inline-block;
    width: 140px;
    font-size: 20px;
    border: none;
    border-radius: 45px;
    height: 40px;
    cursor: pointer;
  }

  .home-content {
    background-color: #F5F5F5;
    padding-top: 20px;
  }

  .home-content h3,
  .home-contentTwo h3,
  .home-contentFour h3 {
    padding: 20px 0 5px 0;
    font-weight: normal;
    text-align: center;
    color: #464242;
    font-size: 18px;
    letter-spacing: 1.5px;
  }

  .home-content h3 span,
  .home-contentTwo h3 span,
  .home-contentFour h3 span {
    color: #EB8262;
    font-size: inherit;
  }

  .home-content-ds,
  .home-contentTwo-ds,
  .home-contentFour-ds {
    text-align: center;
    line-height: 20px;
    color: #656566;
    margin-bottom: 12px;
  }

  .title-line {
    width: 80px;
    height: 1px;
    margin: 0px auto;
    background-color: #4db198;
    position: relative;
  }

  .title-line::before {
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 5px solid #4db198;
    border-right: 5px solid white;
    border-bottom: 5px solid white;
    border-left: 5px solid white;
    margin-left: -3px;
  }

  .home-content-fc {
    width: 1000px;
    margin: 20px auto 0 auto;
    position: relative;
    left: -10px;
  }

  .home-content-fc img {
    width: 1020px;
  }

  .home-contentTwo {
    background-color: white;
    padding-top: 20px;
    width: 100%;
  }

  .home-contentTwo-center {
    width: 1000px;
    margin: 30px auto 0 auto;
  }

  .home-contentTwo-center .home-contentTwo-left {
    display: table-cell;
    vertical-align: middle;
    padding-left: 200px;
    color: #727272;
    padding-top: 50px;
  }

  .home-contentTwo-center .home-contentTwo-right {
    display: table-cell;
    vertical-align: middle;
    padding-left: 15px;
  }

  .home-contentTwo-left div:first-child {
    display: inline-block;
    margin-left: 50px;
  }

  .home-contentTwo-left img {
    width: 100px;
    height: 100px;
  }

  .home-contentTwo-left p {
    font-size: 12px;
  }

  .home-contentTwo-left p span {
    color: #64C7B5;
    font-size: inherit;
    padding-left: 3px;
  }

  .home-contentTwo-right img {
    width: 600px;
    margin-bottom: -5px;
  }

  .home-contentThree {
    width: 100%;
    height: 500px;
    background: url(../../static/images/home-bg2.png) no-repeat;
    background-position: 100%;
  }

  .home-contentThree-center {
    width: 1000px;
    margin: 0 auto;
    height: 500px;
  }

  .home-contentThree-left {
    display: table-cell;
    vertical-align: middle;
    height: 500px;
  }

  .home-contentThree-left img {
    width: 515px;
  }

  .home-contentThree-right {
    display: table-cell;
    vertical-align: middle;
    height: 500px;
    padding-left: 20px;
    color: #E1F4F0;
  }

  .home-contentThree-right h3 {
    font-size: 18px;
    padding: 15px 0;
    font-weight: normal;
    letter-spacing: 1.5px;
  }

  .home-contentThree-right h3 span {
    color: #EB8262;
    font-size: inherit;
  }

  .home-contentThree-right div img {
    width: 100px;
    height: 100px;
    display: inline-block;
  }

  .home-contentThree-right div {
    margin: 20px 0 15px 0;
    display: inline-block;
  }

  .home-contentFour {
    width: 100%;
  }

  .home-contentFour-fc {
    width: 1000px;
    margin: 0 auto;
    margin-top: 30px;
  }

  .home-contentFour-fc img {
    width: 1000px;
    display: inline-block;
    margin-bottom: -4px;
  }

</style>
